<template>
	<view class="wrap">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="tom-container">
			<view class="title">
				{{$t('yhzc')}}
			</view>
			<view class="form">
				<view class="form-list">
					<u-icon class="left" name="nicheng" size="36" custom-prefix="custom-icon" color="#7E7E7E"></u-icon>
					<view class="right">
						<u-input v-model="name" class="content" type="text" maxlength="20" :placeholder="$t('qsrnc')" :clearable="false" @blur="VerifyName"/>
						<u-icon v-if="switch5" name="zhengque1" color="#7E7E7E" size="36" custom-prefix="custom-icon"></u-icon>
						<u-icon v-if="switch5 === false" name="cuowu" size="26" custom-prefix="custom-icon" color="red" style="margin-right: 6rpx;" @tap="name=''"></u-icon>
					</view>
				</view>
				<view class="form-list">
					<u-icon class="left" name="youxiang" size="36" custom-prefix="custom-icon" color="#7E7E7E" style="margin-left: -8rpx;position: relative;left: 4rpx;"></u-icon>
					<view class="right">
						<u-input v-model="phone" class="content" type="text" :placeholder="$t('qsryxdz')" :clearable="false" @blur="VerifyMail" />
						<u-icon v-if="switch4" name="zhengque1" color="#7E7E7E" size="36" custom-prefix="custom-icon"></u-icon>
						<u-icon v-if="switch4 === false" name="cuowu" size="26" custom-prefix="custom-icon" color="red"style="margin-right: 6rpx;" @tap="Mail=''"></u-icon>
					</view>
				</view>
				<view class="form-list">
					<u-icon class="left" name="yaoqingma1" size="36" custom-prefix="custom-icon" color="#7E7E7E"></u-icon>
					<view class="content">
						<u-input v-model="verificationCode" maxlength="6" class="" type="text" :placeholder="$t('qsryzm')" :clearable="false" />
						<text @tap="getCode" class="row-main-tip" style="color:#0A41BA;">{{tips}}</text>
					</view>
				</view>
				<view class="form-list">
					<u-icon class="left" name="denglu-mima" size="36" custom-prefix="custom-icon" color="#7E7E7E"></u-icon>
					<view class="right">
						<u-input v-model="password" class="content" maxlength="20" :type="switch1 ? 'text' : 'password'" :placeholder="$t('qsrdlmm')"
						 :clearable="false" :password-icon="false" @blur="VerifyPassword" />
						<u-icon @click="switch1=!switch1" name="yanjing" :color="switch1?'#7E7E7E':'#999999'" size="36" custom-prefix="custom-icon"></u-icon>
					</view>
				</view>
				<view class="form-list">
					<u-icon class="left" name="denglu-mima" size="36" custom-prefix="custom-icon" color="#7E7E7E"></u-icon>
					<view class="right">
						<u-input v-model="confirmPassword" class="content" maxlength="20" :type="switch2 ? 'text' : 'password'"
						 :placeholder="$t('qzsrdlmm')" :clearable="false" :password-icon="false"  @blur="VerifyPassword2" />
						<u-icon @click="switch2=!switch2" name="yanjing" :color="switch2?'#7E7E7E':'#999999'" size="36" custom-prefix="custom-icon"></u-icon>
					</view>
				</view>
				<view class="form-list">
					<u-icon class="left" name="jiaoyimima" size="36" custom-prefix="custom-icon" color="#7E7E7E"></u-icon>
					<view class="right">
						<u-input v-model="transferPassword" maxlength="6" class="content" :type="switch3 ? 'text' : 'password'"
						 :placeholder="$t('qsrjymm')" :clearable="false" :password-icon="false"  />
						<u-icon @click="switch3=!switch3" name="yanjing" :color="switch3?'#7E7E7E':'#999999'" size="36" custom-prefix="custom-icon"></u-icon>
					</view>
				</view>
				<view class="form-list">
					<u-icon class="left" name="yaoqingma" size="36" custom-prefix="custom-icon" color="#7E7E7E"></u-icon>
					<view class="right">
					<u-input v-model="inviteCode" maxlength="6" class="content" type="text" :placeholder="$t('qsryqm')" :clearable="false"
					 :password-icon="false" />
					</view>
				</view>
			</view>
			<view @tap="register" class="login_btn">{{$t('qrzc')}}</view>
			<view class="form_Register">{{$t('yyzh')}}<text class="form_Register_text" @tap="toPage()">{{$t('qdenglu')}}</text></view>
		</view>
		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				show:false,//是否显示协议弹窗
				name:'',//昵称
				numberType:0,/*账号类型，1手机2邮箱*/
				phone:'',// 手机号码
				verificationCode:'',// 验证码
				password:'',// 登录密码
				confirmPassword:'',// 确认密码
				inviteCode:'',// 邀请码
				transferPassword:'',//交易密码
				tips:this.$t('hqyzm'),//倒计时提示文字
				seconds:60,
				check:false,//是否否选
				content:'',
				switch1: false,
				switch2: false,
				switch3: false,
				switch4: '',
				switch5: '',
			};
		},
		onLoad() {
			// this.registerAgreement()
		},
		onShow() {

		},
		computed: {

		},
		methods: {
			VerifyName(e){
					this.name = e;
					console.log(this.name)
					if (!this.$u.test.isEmpty(this.name)) { this.switch5 = true}else{ this.switch5 = false}
					if(this.$u.test.isEmpty(this.name)) return this.$utils.toast(this.$t('qsrnc'));
					
				},
				VerifyMail(e){
					this.phone = e;
					// if(!this.$u.test.mobile(this.phone)){
						if(!this.$u.test.email(this.phone)){
							this.switch4 = false;
							return this.$utils.toast(this.$t('qsrzqdz'))
						}
					// }
					this.switch4 = true;
				},
				VerifyPassword(e){
					if(this.$u.test.isEmpty(this.password)) return this.$utils.toast(this.$t('qsrmm'))
				},
				VerifyPassword2(){
					if(this.password.toString() != this.confirmPassword.toString()){
						this.$utils.toast(this.$t('lxsrbyz'))
						return false;
					}
				},
				VerifyPassword3(){
					if(this.transferPassword.toString().length!=6){
						this.$utils.toast(this.$t('mm6'))
						return false;
					}
				},
				VerifyCode(e){
					this.inviteCode = e
				},
				VerifyYzm(e){
					this.verificationCode = e
				},
				// 获取协议
				registerAgreement(){
					this.$api.loginApi.registerAgreement()
					.then(res=>{
						this.content=res.data || '';
					})
				},
				// 注册
				register(){
					let reg = new RegExp('^(?![0-9A-Z]+$)(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$');
					var mytextarea = /^[\u4E00-\u9FA5A-Za-z0-9:#@!$%*]+$/;
					if(this.$u.test.isEmpty(this.name)) return this.$utils.toast(this.$t('qsrnc'));
					if(!mytextarea.test(this.name)){
						this.$utils.toast(this.$t('qbyff'))
						return false;
					}
					// if(!this.$u.test.mobile(this.phone)){
						if(!this.$u.test.email(this.phone)){
							return this.$utils.toast(this.$t('qsrzqdz'))
						}
					// }
					if(this.$u.test.isEmpty(this.verificationCode)) return this.$utils.toast(this.$t('qsryzm'));
					if(this.$u.test.isEmpty(this.password)) return this.$utils.toast(this.$t('qsrmm'));
					if(!reg.test(this.password)) return this.$utils.toast(this.$t('mimazh'));
					if(this.password.toUpperCase()!=this.confirmPassword.toUpperCase()) return this.$utils.toast(this.$t('lxsrbyz'))
					if(!this.$u.test.digits(this.transferPassword) || this.transferPassword.toString().length!=6) return this.$utils.toast(this.$t('mm6'));
					if(this.$u.test.isEmpty(this.inviteCode)) return this.$utils.toast(this.$t('qsryqm'));
					// if(!this.check) return this.$utils.toast('请确认是否同意注册协议')
					this.$utils.loading(this.$t('zcz'))
					this.$api.loginApi.register({
						name:this.name,
						account:this.phone,
						verificationCode:this.verificationCode,
						password:this.password,
						inviteCode:this.inviteCode,
						transferPassword:this.transferPassword
					})
					.then(res=>{
						this.$utils.toast(res.data)
						uni.navigateTo({
							url:'/pages/Login/Login'
						})
					})
				},
				// 倒计时变化
				codeChange(text) {
					this.tips = text;
				},
				// 获取验证码
				getCode() {
					if(!this.$u.test.mobile(this.phone)){
						if(!this.$u.test.email(this.phone)){
							return this.$utils.toast(this.$t('qsrzqdz'))
						}
					}
					// if(this.$u.test.mobile(this.phone)) this.numberType = 1;
					// if(this.$u.test.email(this.phone)) this.numberType = 2;
					console.log(this.numberType)
					if(this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: this.$t('zzhq')
						})
						// if(this.numberType == 1){
							// this.$api.loginApi.getMsg({
							// 	phone:this.phone
							// })
							// .then(res=>{
							// 	uni.hideLoading();
							// 	// 这里此提示会被this.start()方法中的提示覆盖
							// 	this.$utils.toast('验证码已发送');
							// 	// 通知验证码组件内部开始倒计时
							// 	this.$refs.uCode.start();
							// })
						// }else if(this.numberType == 2){
							this.$api.loginApi.sendMailVerificationCode({
								mailAccount:this.phone
							})
							.then(res=>{
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$utils.toast(this.$t('yzmyfs'));
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							})
						// }
					}
				},
			toPage(){
				uni.navigateTo({
					url:'/pages/Login/Login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background-image: url('/static/new_images/login-bg.png');
		background-position: left top;
		background-size: 100% 100%;
		.tom-container {
			position: relative;
		}

		.protocol {
			margin: 26rpx 0rpx 16rpx 0rpx;
			display: flex;
			align-items: center;

			&-check {
				margin-right: 10rpx;
			}

			&-text {
				color: $tom-text-color;
				font-size: 24rpx;
			}

			&-href {
				color: $text-color;
				margin: 0 10rpx;
			}
		}

		.popup {
			height: 100%;
			display: flex;
			flex-direction: column;

			&-top {
				height: 68rpx;
				display: flex;
				align-items: center;
				background-color: $text-color;
				padding: 0 30rpx;

				&-title {
					flex: 1;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					text-align: center;
				}

				&-side {
					width: 50rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}

			&-content {
				padding: 24rpx 40rpx;
				flex: 1;
				overflow: auto;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;

				.scroll {
					flex: 1;
					min-height: 0;
				}
			}

			&-footer {
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $text-color;

				&-btn {
					width: 206rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					border-radius: 34rpx;
					background-color: #fff;
					color: $text-color;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
	.title{
		font-size: 48rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
		margin: 100rpx 0rpx 20rpx 0rpx;
	}
	.form {
		border-radius: 20upx;
		margin: 0upx 60rpx;
		.form-list {
			background:#fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0rpx 16upx;
			margin: 30rpx 0rpx;
			border: 2upx solid #fff;
			border-radius: 10rpx;
			.left {
				color: $text-color;
				font-size: 50upx;
				margin-right: 20upx;
			}

			.left2 {
				margin-right: 14upx;
			}

			.lefthe {
				width: 100%;
			}

			.content {
				width: 100%;
				height: 70upx;
				display: flex;
				align-items: center;
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				.content {
					border: none;
				}
			}
		}

		.row-main-tip {
			color:#fff;
		}
	}
	.login_btn{
		width:calc(100% - 120rpx);
		background-color: #fff;
		color: $text-color;
		margin: 0rpx 60rpx;
		box-sizing: border-box;
		margin-top: 80rpx;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.form_Register{
		position: absolute;
		bottom: 80rpx;
		text-align: center;
		width: 100%;
		left: 0;
		color: #ccc;
		.form_Register_text{
			color: #66ccff;
			font-size: 28rpx;
		}
	}
</style>
